// src/components/OnlineCollecting/DynamicToolbar.tsx
import React from 'react';
import { Button, Dropdown, Space } from 'antd';
import { MoreOutlined, DownOutlined } from '@ant-design/icons';
import { ActionDispatcher } from '@/utils/buttonActions';

interface DynamicToolbarProps {
  type: string;
  buttons: any[];
  selectedRows: React.Key[];
  currentType?: { typeCode: string; arrangeDimension: 'FILE' | 'ROLL'; fullId: string };
  menuId: string;
  loading?: boolean;
  fileState: string;
}

const DynamicToolbar: React.FC<DynamicToolbarProps> = ({
  buttons,
  selectedRows,
  currentType,
  menuId,
  loading,
  fileState
}) => {
  console.log('buttons==',buttons);
  
  const handleAction = (permission: string, modelType: string) => {
    ActionDispatcher.execute(permission, {
      modelType,
      selectedRows,
      currentType,
      menuId,
      fileState
    });
  };

  const renderButtonGroup = () => {
    if (!buttons?.length) return null;
    
    const visibleButtons = buttons.filter(btn => btn.isHide !== "1");
    const hiddenButtons = buttons.filter(btn => btn.isHide === "1");

    return (
      <div style={{ 
        display: 'flex',
        flexWrap: 'wrap',
        gap: 8,
        alignItems: 'center'
      }}>
        {/* 所有按钮（包括更多）作为一个整体 */}
        {visibleButtons.map((btn, index) => (
          <Button
            key={btn.permission}
            type={index === 0 ? 'primary' : 'default'}
            disabled={loading}
            onClick={() => handleAction(btn.permission, btn.modelType)}
            style={{ flexShrink: 0 }} // 防止按钮被压缩变形
          >
            {btn.name}
          </Button>
        ))}
        
        {hiddenButtons.length > 0 && (
          <Dropdown
            menu={{
              items: hiddenButtons.map(btn => ({
                key: btn.permission,
                label: btn.name,
                disabled: loading,
                onClick: () => handleAction(btn.permission, btn.modelType),
              }))
            }}
          >
            <Button style={{ flexShrink: 0 }}>
              <MoreOutlined /> 更多 <DownOutlined />
            </Button>
          </Dropdown>
        )}
      </div>
    );
  };

  return renderButtonGroup(); // 直接返回按钮组
};

export default DynamicToolbar;